<template>
	<view>
		<view style="height: 18upx;"></view>
		<view class="card-view" v-for="(item, index) in dataList" :key="item.exchangeGoodsId"
			@click="onNavDetail(item, index)">
			<view class="card-title">
				<view class="order-on">
					<image src="/static/order-icon.png" class="order-icon"></image>
					<view>{{item.exchangeOrderId}}</view>
				</view>

				<view class="order-state">{{status[item.status]}}</view>
			</view>
			<view class="card-content">
				<image :src="getImage(item.goodsSpu.coverImg)" class="goods-image" mode="aspectFill"></image>
				<view class="goods-content">
					<view class="goods-name">{{item.goodsSpu.name}}</view>
					<view class="tag-view">
						<view class="tag-item">{{item.goodsSku.skuName}}</view>
					</view>
					<view class="goods-sum">
						<view class="number-view">
							<!-- 使用积分数量 -->
							<view>{{item.usePoints}}</view>
							<view class="unit-text">积分</view>
						</view>
						<view class="sum-number">
							<view>x</view>
							<!-- 兑换数量 -->
							<view class="number-text">{{item.quantity}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="options-view">
				<!-- 兑换时间 时间戳 -->
				<view class="time-text">{{dateFormat(item.exchangeTimes, 'YYYY.MM.DD HH:mm')}}</view>
				<!-- 订单状态 10 待确认 20 已确认（待自提，待收货） 30已拒绝 40已取消 50已收货 -->
				<view v-if="item.status == '10'" class="button-view" @click.stop="onCancel(item, index)">取消兑换</view>
				<view v-else-if="item.status == '20'" class="button-view button-active" @click.stop="onConfirm(item, index)">
					{{item.type == '20' ? '确认自提' : '确认收货'}}
				</view>
				<view v-else-if="item.status == '30'" class="button-view">驳回原因</view>
			</view>
		</view>
		<view style="height: 160upx;"></view>
	</view>
</template>

<script>
	import orderStatus from '@/enum/orderStatus.js';
	export default {
		data() {
			return {
				status: orderStatus,
				queryData: {
					total: 0,
					pageNo: 1,
					pageSize: 15,
				},
				dataList: []
			}
		},
		onLoad(options) {
			this.getRequestList()
		},
		onPullDownRefresh() {
			this.queryData.pageNo = 1
			this.getRequestList()
		},
		onReachBottom() {
			if (this.queryData.total <= this.dataList.length) return
			this.queryData.pageNo += 1
			this.getRequestList()
		},
		methods: {
			async onCancel(item, index) {
				const boo = await uni.$util.showModal('确定取消兑换码?')
				if (!boo) return
				uni.$util.showLoading()
				await uni.$api.goodsCancelExchangeOrder(item.exchangeGoodsId).finally(uni.finally)
				this.getExchangeRecordDetail(item.exchangeGoodsId, index)
				uni.$util.showSuccess()
			},
			async onConfirm(item, index) {
				const boo = await uni.$util.showModal('确认收货/自提吗?')
				if (!boo) return
				uni.$util.showLoading()
				await uni.$api.goodsConfirmReceipt(item.exchangeGoodsId).finally(uni.finally)
				this.getExchangeRecordDetail(item.exchangeGoodsId, index)
				uni.$util.showSuccess()
			},
			async getExchangeRecordDetail(detailId, index) {
				uni.$util.showLoading()
				const res = await uni.$api.getExchangeRecordDetail(detailId).finally(uni.finally)
				this.$set(this.dataList, index, res.data)
			},
			onNavDetail(item, index) {
				uni.navigateTo({
					url: `/pages/integralExchangeDetail/integralExchangeDetail?detailId=${item.exchangeGoodsId}`,
					events: {
						backEvent: (res) => this.$set(this.dataList, index, res)
					}
				})
			},
			/**
			 * 获取积分记录列表
			 */
			async getRequestList() {
				uni.$util.showLoading()
				const res = await uni.$api.getExchangeRecord(this.queryData).finally(uni.finally)
				const list = res.data.rows || []
				this.queryData.total = res.data.totalRows
				this.dataList = this.queryData.pageNo == 1 ? list : this.dataList.concat(list)
			},
			getImage(coverImg) {
				const strArr = coverImg.split(',')
				if (!strArr.length) return ''
				return `${this.IMG_URL}${strArr.shift()}`
			},
		}
	}
</script>

<style scoped lang="scss">
	.card-view {
		width: 707rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 0 22upx;

		.card-title {
			width: 100%;
			@extend .row-between;
			padding-top: 25upx;
			padding-bottom: 22upx;
			border-bottom: 1px solid #F7E8E4;

			.order-on {
				@extend .row;
				font-size: 25rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #69442E;

				.order-icon {
					width: 29upx;
					height: 29upx;
					margin-right: 7upx;
				}
			}

			.order-state {
				font-size: 25rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #B8ACA3;
			}
		}

		.card-content {
			width: 100%;
			@extend .row-between;
			align-items: flex-start;
			margin-top: 22upx;

			.goods-image {
				width: 194upx;
				height: 194upx;
			}

			.goods-content {
				width: calc(100% - 212upx);

				.goods-name {
					width: 100%;
					font-size: 29rpx;
					font-weight: 400;
					color: #2C1101;
				}

				.tag-view {
					width: 100%;
					@extend .row-start;
					margin-top: 7upx;

					.tag-item {
						padding: 5upx 13upx;
						font-size: 18rpx;
						font-weight: 400;
						color: #FE5950;
						border: 1rpx solid #FE5950;
						border-radius: 12upx;
					}

				}

				.goods-sum {
					width: 100%;
					@extend .row-between;
					margin-top: 25upx;

					.number-view {
						@extend .row;
						align-items: baseline;
						font-size: 36rpx;
						font-weight: 600;
						color: #EC4725;


						.unit-text {
							font-size: 22rpx;
						}
					}

					.sum-number {
						@extend .row;
						align-items: baseline;
						font-size: 22rpx;
						font-weight: 400;
						color: #B7A09A;

						.number-text {
							font-size: 25rpx;
							color: #4D0F0B;
							margin-left: 7upx;
						}
					}
				}



			}
		}

		.options-view {
			width: 100%;
			@extend .row-between;
			padding: 16upx 0;
			border-top: 1rpx solid #F7E8E4;
			margin-top: 22upx;

			.time-text {
				font-size: 25rpx;
				font-weight: 400;
				color: #B8ACA3;
			}

			.button-view {
				border-radius: 7rpx;
				border: 1rpx solid #2C1101;
				padding: 11upx 20upx;
				font-size: 25rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #2C1101;
			}

			.button-active {
				border-color: #FF2615;
				color: #FF2615;
			}
		}
	}

	.card-view+.card-view {
		margin-top: 18upx;
	}
</style>